.shopping-mall-page {
    position: relative;
    padding-left: @sub-nav-width;
    .table-params {
        left: @sub-nav-width;;
    }
    .table-list {
        left: @sub-nav-width;;
    }
    .table-pagination {
        left: @sub-nav-width;
    }
}

.shopping-mall-product-page {
    position: relative;
    .table-params {
        top: 130px !important;
    }
    .table-list {
        top: 180px !important;
    }
    .ant-tabs-tab {
        padding: 0;
    }
    .group-tab {
        position: relative;
        padding: 20px;
        .group-operation {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            visibility: hidden;
            margin: 0;
        }
        &:hover .group-operation {
            visibility: visible !important;
        }
    }
}

.multi-select-container {
    width: 100%;
    max-height: 370px;
    .overflow-y;
    .item-box {
        width: 130px;
        height: 56px;
        .flex-center;
        .text-overflow;
        .ft-14;
        .ft-clr-d;
        .bd-l;
        .cur-poi;
        float: left;
        margin-left: 10px;
        margin-bottom: 16px;
        &:hover, &.selected {
            .clr-green;
            .bd-green;
        }
        &:nth-child(4n + 1) {
            margin-left: 0;
        }
    }
}


.shopping-mall-order-list-page {
    .table-list {
        top: 130px !important;
    }
}

.shopping-mall-order-detail {
    position: relative;
    padding: 32px 24px;
    .detail-box {
        width: 100%;
        padding: 32px;
        border: 1px solid @bd-clr-l;
        margin-bottom: 24px;
        border-radius: 4px;
    }
}


.shopping-mall-mode {
    position: absolute;
    left: @sub-nav-width;
    top: 0;
    right: 0;
    background-color: rgba(22,188,82,0.06);
    padding: 0 24px;
    height: 60px;
    .flex-vertical-center;
    color: @ft-clr-d;
}
.shopping-mall-settings-page {
    position: relative;
    padding-top: 60px;
}

.shopping-mall-design-detail-page {
    position: relative;
    .bilin-web-right {
        background-color: @bg-fa;
        .module-choose-container {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            .overflow-y;
            width: 104px;
            background-color: @white;
        }
        .preview-container {
            position: absolute;
            top: 0;
            left: 240px;
            right: 420px;
            bottom: 0;
            max-height: 812px;
            overflow: hidden;
            .preview-reality {
                position: relative;
                background-color: @white;
                width: 375px;
                height: 812px;
                margin: 40px 0 10px;
                .preview-title {
                    padding: 30px 0 10px 0;
                    text-align: center;
                    .ft-18;
                    .bdb-l;
                    margin-bottom: 8px;
                }
            }
            &:hover {
                .overflow-y;
            }
            .share-icon {
                position: absolute;
                right: 24px;
                top: 30px;
                width: 87px;
                height: 30px;
                border-radius: 15px;
                background-color: #fff;
                .flex();
                &:after {
                    width: 1px;
                    height: 20px;
                    position: absolute;
                    top: 5px;
                    left: 43px;
                    background-color: @bd-db;
                    content: '';
                }
                .icon-left {
                    width: 43px;
                    height: 30px;
                    .flex-center();
                    .circle-large {
                        width: 6px;
                        height: 6px;
                        border-radius: 3px;
                        background-color: #000;
                        margin: 0 2px;
                    }
                    .circle-small {
                        width: 4px;
                        height: 4px;
                        border-radius: 2px;
                        background-color: #000;
                    }
                }
                .icon-right {
                    width: 43px;
                    height: 30px;
                    .flex-center();
                    .circle-by-circle {
                        width: 16px;
                        height: 16px;
                        padding: 3px;
                        border: 2px solid #000;
                        border-radius: 8px;
                        &:after {
                            width: 6px;
                            height: 6px;
                            border-radius: 3px;
                            background-color: #000;
                            display: block;
                            content: '';
                        }
                    }
                }
            }
            .empty-bg {
                background: rgba(0,0,0,0.04);
            }
            .drop-target {
                background: @light-green;
                width: 100%;
                height: 100px;
                .ft-14;
                .flex-center;
                color: @green;
            }
            .tabbar-preview {
                position: absolute;
                bottom: 2px;
                left: 0;
                right: 0;
                height: 50px;
                .flex-horizontal-around;
            }
            .banner-list-preview {
                position: relative;
                padding: 8px 16px;
                .banner-img {
                    border-radius: 8px;
                    overflow: hidden;
                    width: 100%;
                    height: 80px;
                }
            }
            .menu-list-preview {
                position: relative;
                .flex-horizontal-around;
                .pd-16;
                .menu-item {
                    width: 60px;
                    .flex-center;
                    .menu-item-img {
                        width: 48px;
                        height: 48px;
                        .bd-rds-half;
                        overflow: hidden;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .menu-item-text {
                        width: 100%;
                        .ft-12;
                        .mgt-8;
                        .txc;
                    }
                }
            }
            .title-preview {
                position: relative;
                width: 100%;
                padding: 0 16px;
                height: 30px;
                .ft-16;
                .flex-vertical-center;
            }
            .owner-preview {
                .absolute-fullscreen;
                background-color: @bg-f5;
                .owner-base {
                    position: relative;
                    padding: 65px 0 20px;
                    background-color: @white;

                    .user-base-info {
                        padding: 0 16px;

                        .user-info {
                            .left-box {
                                position: relative;

                                .svip-image {
                                    width: 30px;
                                    height: 13px;
                                    position: absolute;
                                    left: 115px;
                                    top: 7px;
                                }

                                .person-image {
                                    width: 44px;
                                    height: 44px;
                                }

                                .name {
                                    font-weight: 500;
                                    font-size: 18px;
                                    position: absolute;
                                    left: 55px;
                                }

                                .phone {
                                    font-size: 14px;
                                    color: @ft-clr-md;
                                    position: absolute;
                                    left: 55px;
                                    top: 24px;
                                }
                            }

                            .right-box {
                                position: absolute;
                                right: 40px;
                                top: 65px;

                                .anticon {
                                    font-size: 18px;
                                }

                                .anticon + span {
                                    position: absolute;
                                    top: 20px;
                                    width: 60px;
                                    right: -30px;
                                }
                            }
                        }
                    }
                }

                .user-card-info {
                    padding: 0 16px 12px;
                    border-radius: 8px 8px 0 0;
                    background: linear-gradient(180deg, #fff, #F5F5F5);

                    &.custom-bg {
                        background: transparent;
                    }

                    .money-info {
                        display: flex;
                        padding: 12px 0;

                        .item {
                            flex: 1;
                            text-align: center;
                            display: flex;
                            flex-direction: column;

                            .num {
                                font-weight: 500;
                                font-size: 18px;
                            }

                            .info {
                                font-size: 14px;
                                color: @ft-clr-md;
                            }
                        }

                        .item:not(:last-child) {
                            border-right: 1px solid #eeeeee;
                        }
                    }

                    .member-card-image-box {
                        position: relative;

                        &.simple-card {
                            margin: 0 -12px;
                        }

                        &.circle {
                            border-radius: 10px;
                            overflow: hidden;
                        }

                        .member-card-image {
                            width: 100%;
                        }
                    }

                    .pay-member-guide {
                        position: relative;
                        margin-top: 10px;

                        &.circle {
                            border-radius: 10px;
                            overflow: hidden;
                        }

                        &.disabled {
                            opacity: .4;
                        }

                        .pay-member-guide-image {
                            width: 100%;
                        }
                    }
                }

                .menu-list {
                    position: relative;
                    margin: 16px 16px 0;
                    background-color: @white;
                }
            }
            .product-list-preview {
                position: relative;
                padding: 15px;
                .clearfix;
                .product-item {
                    float: left;
                    margin-bottom: 10px;
                    .product-name {
                        .ft-14;
                        .text-overflow-line(2);
                        .mgt-8;
                    }
                    .product-price {
                        .ft-14;
                        .clr-green;
                        .mgt-8;
                    }
                }
                &.one-one {
                    .product-item {
                        width: 343px;
                        .product-img {
                            width: 343px;
                            height: 343px;
                        }
                    }
                }
                &.one-two {
                    .product-item {
                        width: 165px;
                        margin-left: 13px;
                        &:nth-child(2n + 1) {
                            margin-left: 0;
                        }
                        .product-img {
                            width: 165px;
                            height: 165px;
                        }
                    }
                }
                &.one-three {
                    .product-item {
                        width: 109px;
                        margin-left: 8px;
                        &:nth-child(3n + 1) {
                            margin-left: 0;
                        }
                        .product-img {
                            width: 109px;
                            height: 109px;
                        }
                    }
                }
                &.one-more {
                    display: flex;
                    overflow: hidden;
                    .product-item {
                        width: 97px;
                        margin-left: 7px;
                        &:first-of-type {
                            margin-left: 0;
                        }
                        .product-img {
                            width: 97px;
                            height: 97px;
                        }
                    }
                }
            }
            .coupon-preview {
                position: relative;
            }
            .home-preview {
                position: relative;
                .home-module-preview {
                    position: relative;
                    // 拖拽范围判断优化添加空区域
                    &:after {
                        width: 60px;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 100%;
                        content: '';
                    }
                }
                .home-preview-selected-operation {
                    position: absolute;
                    left: 100%;
                    top: 0;
                    .mgl-12;
                    z-index: 10;
                    .operation-box {
                        width: 40px;
                        height: 40px;
                        .mgb-8;
                        border-radius: 4px;
                        background-color: @white;
                        .flex-center;
                        .cur-poi;
                    }
                }
            }
            .special-preview {
                position: relative;
                .special-preview-store {
                    position: relative;
                    .pd-16;
                    .flex-vertical-center;
                    .special-img {
                        width: 36px;
                        height: 36px;
                    }
                }
            }
            .cart-preview {
                position: relative;
            }
            .global-preview {
                position: relative;
                .global-preview-image {
                    width: 375px;
                    height: 812px;
                }
                .global-preview-price {
                    position: absolute;
                    top: 477px;
                    left: 16px;
                    .ft-24;
                }
                .global-preview-button {
                    position: absolute;
                    bottom: 30px;
                    right: 16px;
                    width: 250px;
                    height: 44px;
                    overflow: hidden;
                    color: #fff;
                    .flex-vertical-center;
                    .global-preview-button-content {
                        width: 125px;
                        .ft-14;
                        text-align: center;
                        .cur-poi;
                        &:first-of-type {
                            border-right: 1px solid @white;
                        }
                    }
                    &.circle {
                        border-radius: 22px;
                    }
                }
            }
        }
        .operation-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 420px;
            background-color: @white;
            .overflow-y;
            .pd-24;
            .operation-block-bg {
                background: rgba(0,0,0,0.02);
            }
        }
    }
}

.product-list-module {
    .product-module-item {
        position: relative;
        .pd-16;
        .mgt-12;
        .bd-l;
        .product-img {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 16px;
            left: 16px;
        }
        .product-info {
            padding-left: 45px;
            height: 40px;
            .flex-vertical-center;
        }
        .operation-box {
            position: absolute;
            top: 0;
            right: 0;
            .flex-vertical-center;
            visibility: hidden;
            .operation-icon {
                font-size: 18px;
                margin-left: 2px;
                .cur-poi;
            }
        }
        &:hover .operation-box {
            visibility: visible;
        }
    }
}